<template>
	<view class="recharge-container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="navbar-content">
				<view class="back-btn" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="navbar-title">充值</view>
				<view class="detail-btn" @click="showDetail">
					<text class="detail-text">明细</text>
				</view>
			</view>
		</view>

		<!-- 主要内容 -->
		<view class="content">
			<!-- 余额显示 -->
			<view class="balance-section">
				<view class="balance-icon">💰</view>
				<view class="balance-amount">{{ currentBalance }}</view>
			</view>

			<!-- 充值套餐 -->
			<view class="packages-section">
				<view class="packages-grid">
					<view 
						class="package-item" 
						:class="{ 'selected': selectedPackage === index }"
						v-for="(pkg, index) in packages" 
						:key="index"
						@click="selectPackage(index)"
					>
						<view class="package-badge" v-if="pkg.discount">
							<text class="badge-text">{{ pkg.discount }}</text>
						</view>
						<view class="package-icon">💰</view>
						<view class="package-amount">{{ pkg.amount }}</view>
						<view class="package-price">¥{{ pkg.price }}</view>
					</view>
				</view>
			</view>

			<!-- 支付方式 -->
			<view class="payment-section">
				<view class="payment-title">支付方式</view>
				<view class="payment-options">
					<view 
						class="payment-option" 
						:class="{ 'selected': selectedPayment === index }"
						v-for="(payment, index) in paymentMethods" 
						:key="index"
						@click="selectPayment(index)"
					>
						<view class="payment-logo">{{ payment.icon }}</view>
						<view class="payment-name">{{ payment.name }}</view>
						<view class="payment-check" v-if="selectedPayment === index">
							<text class="check-icon">✓</text>
						</view>
						<view class="payment-radio" v-else></view>
					</view>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-spacer"></view>
		</view>

		<!-- 充值按钮 -->
		<view class="recharge-button-section">
			<button class="recharge-btn" @click="handleRecharge" :disabled="selectedPackage === -1">
				<text class="btn-text">¥{{ selectedPackage !== -1 ? packages[selectedPackage].price : 0 }}立即充值</text>
			</button>
			<view class="agreement-text">
				<text class="agreement">充值即同意</text>
				<text class="agreement-link" @click="showAgreement">《充值协议》</text>
			</view>
			<view class="service-info">
				<text class="service-text">如遇问题,请点击问题反馈</text>
				<text class="service-text">或联系客服:18059273485</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentBalance: 0,
			selectedPackage: 0, // 默认选中第一个套餐
			selectedPayment: 0, // 默认选中支付宝
			packages: [
				{
					amount: 60,
					price: 6,
					discount: null
				},
				{
					amount: 200,
					price: 18,
					discount: '9折'
				},
				{
					amount: 350,
					price: 28,
					discount: '8折'
				},
				{
					amount: 500,
					price: 38,
					discount: '7.6折'
				},
				{
					amount: 960,
					price: 68,
					discount: '7折'
				},
				{
					amount: 2000,
					price: 128,
					discount: '6.4折'
				}
			],
			paymentMethods: [
				{
					name: '支付宝支付',
					icon: '💰'
				},
				{
					name: '微信支付',
					icon: '💚'
				}
			]
		}
	},
	onLoad() {
		// 获取当前余额
		this.getCurrentBalance();
		// 设置状态栏样式
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#ffffff'
		});
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		showDetail() {
			uni.showToast({
				title: '查看明细',
				icon: 'none'
			});
		},
		
		selectPackage(index) {
			this.selectedPackage = index;
		},
		
		selectPayment(index) {
			this.selectedPayment = index;
		},
		
		getCurrentBalance() {
			// 从本地存储获取当前余额
			this.currentBalance = uni.getStorageSync('userBalance') || 0;
		},
		
		handleRecharge() {
			if (this.selectedPackage === -1) {
				uni.showToast({
					title: '请选择充值套餐',
					icon: 'none'
				});
				return;
			}
			
			const pkg = this.packages[this.selectedPackage];
			const payment = this.paymentMethods[this.selectedPayment];
			
			uni.showModal({
				title: '确认充值',
				content: `确认使用${payment.name}充值${pkg.amount}算力值，需支付¥${pkg.price}？`,
				success: (res) => {
					if (res.confirm) {
						this.processPayment();
					}
				}
			});
		},
		
		processPayment() {
			const pkg = this.packages[this.selectedPackage];
			const payment = this.paymentMethods[this.selectedPayment];
			
			uni.showLoading({
				title: '正在跳转支付...'
			});
			
			// 模拟支付流程
			setTimeout(() => {
				uni.hideLoading();
				
				// 模拟支付结果 (90% 成功率)
				const isSuccess = Math.random() > 0.1;
				
				if (isSuccess) {
					uni.showModal({
						title: '🎉 充值成功',
						content: `成功充值${pkg.amount}算力值！\n现在可以畅享AI服务啦！`,
						showCancel: false,
						confirmText: '开始使用',
						success: () => {
							// 更新余额
							this.currentBalance += pkg.amount;
							
							// 保存余额到本地存储
							uni.setStorageSync('userBalance', this.currentBalance);
							
							// 触发余额更新事件，通知其他页面
							uni.$emit('balanceUpdated', this.currentBalance);
							
							// 返回上一页
							uni.navigateBack();
						}
					});
				} else {
					uni.showModal({
						title: '支付失败',
						content: '支付过程中出现问题，请重试或联系客服',
						showCancel: true,
						cancelText: '重试',
						confirmText: '联系客服',
						success: (res) => {
							if (res.confirm) {
								this.contactService();
							}
						}
					});
				}
			}, 2000);
		},
		
		showAgreement() {
			uni.showToast({
				title: '查看充值协议',
				icon: 'none'
			});
		},
		
		contactService() {
			uni.showToast({
				title: '联系客服',
				icon: 'none'
			});
		}
	}
}
</script>

<style scoped>
.recharge-container {
	width: 100%;
	min-height: 100vh;
	background: #000000;
	color: #ffffff;
	position: relative;
}

/* 状态栏占位 */
.status-bar {
	height: var(--status-bar-height);
	background: #000000;
}

/* 导航栏 */
.navbar {
	background: #000000;
	padding: 0 30rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
}

.navbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.back-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	font-size: 40rpx;
	color: #ffffff;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #ffffff;
}

.detail-btn {
	width: 80rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.detail-text {
	font-size: 28rpx;
	color: #ffffff;
}

/* 主要内容 */
.content {
	padding: 40rpx 30rpx;
}

/* 余额显示 */
.balance-section {
	text-align: center;
	margin-bottom: 60rpx;
}

.balance-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
}

.balance-amount {
	font-size: 80rpx;
	font-weight: 700;
	color: #00ff00;
}

/* 充值套餐 */
.packages-section {
	margin-bottom: 60rpx;
}

.packages-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.package-item {
	position: relative;
	background: #1a1a1a;
	border-radius: 16rpx;
	padding: 30rpx 20rpx;
	text-align: center;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
}

.package-item.selected {
	border-color: #00ff00;
	background: #1a1a1a;
}

.package-badge {
	position: absolute;
	top: -8rpx;
	right: -8rpx;
	background: #ff0000;
	color: #ffffff;
	font-size: 20rpx;
	font-weight: 700;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
}

.package-icon {
	font-size: 40rpx;
	margin-bottom: 15rpx;
}

.package-amount {
	font-size: 32rpx;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 10rpx;
}

.package-price {
	font-size: 28rpx;
	color: #ffffff;
}

/* 支付方式 */
.payment-section {
	margin-bottom: 40rpx;
}

.payment-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 30rpx;
}

.payment-options {
	background: #1a1a1a;
	border-radius: 16rpx;
	overflow: hidden;
}

.payment-option {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #333333;
}

.payment-option:last-child {
	border-bottom: none;
}

.payment-option.selected {
	background: #1a1a1a;
}

.payment-logo {
	font-size: 40rpx;
	margin-right: 20rpx;
}

.payment-name {
	flex: 1;
	font-size: 30rpx;
	color: #ffffff;
}

.payment-check {
	width: 40rpx;
	height: 40rpx;
	background: #00ff00;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.check-icon {
	font-size: 24rpx;
	color: #000000;
	font-weight: 700;
}

.payment-radio {
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #666666;
	border-radius: 50%;
}

/* 底部占位 */
.bottom-spacer {
	height: 200rpx;
}

/* 充值按钮 */
.recharge-button-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #000000;
	padding: 30rpx;
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
}

.recharge-btn {
	background: linear-gradient(135deg, #00ff00 0%, #00cc00 100%);
	border: none;
	border-radius: 50rpx;
	height: 100rpx;
	width: 100%;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-text {
	font-size: 32rpx;
	font-weight: 700;
	color: #000000;
}

.agreement-text {
	text-align: center;
	margin-bottom: 20rpx;
}

.agreement {
	font-size: 24rpx;
	color: #999999;
}

.agreement-link {
	font-size: 24rpx;
	color: #00ff00;
}

.service-info {
	text-align: center;
}

.service-text {
	display: block;
	font-size: 22rpx;
	color: #999999;
	line-height: 1.5;
}
</style>